import {useState} from "react";

import './index.scss'

const Item = (props) => {

    const [mouse,setMouse] = useState(false)

    const handleMouse = (flag) => {
        return () => {
            setMouse(flag)
        }
    }
    const handleCheck = (id) => {
        return (event) => {
            props.updateTodo(id, event.target.checked)
        }
    }
    const handleDelete = (id) => {
        if (window.confirm('确定删除吗？')) {
            props.deleteTodo(id)
        }
    }
    const { id, name, done } = props
    return (
        <li style={{
            backgroundColor: mouse ? '#ddd' : 'white'
        }
        } onMouseEnter={handleMouse(true)} onMouseLeave={handleMouse(false)} >
            <label>
                <input type='checkbox' checked={done} onChange={handleCheck(id)} />
                <span>{name}</span>
            </label>
            <button onClick={() => handleDelete(id)} className='but btn-danger' style={{ display: mouse ? 'block' : 'none' }}>删除</button>
        </li >
    );
}
export default Item
